<template>
	<div class="shopcart">
		<div class="content">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo" :class="{'on':totalCount>0}">
						<i class="icon-shopping_cart"></i>
					</div>
					<div class="num" v-show="totalCount>0">
						{{totalCount}}
					</div>
				</div>
				<div class="price" :class="{'on':totalPrice>0}">￥{{totalPrice}}元</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right">
				<div class="pay" :class="payClass">
					{{payDesc}}
				</div>
			</div>
			<!-- 定义动画小球： -->
			<div class="ball-container">
                <div v-for="ball in balls" :key="ball.id">
                    <transition name="drop" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
                        <div v-show="ball.show" class="ball">
                            <div class="inner inner-hook">
                            </div>
                        </div>
                    </transition>
                </div> 
            </div>
		</div>
	</div>
</template>

<script>
export default {
  props:{
  	// 由父元素传递进来选中的商品：
  	selectFood:{
  		type:Array,
  		default(){
  			// 默认数据（可以测试数据）
  			return [{
  				price:15,
  				count:1
  			}];
  		}
  	},
  	deliveryPrice:{
  		type:Number,
  		// 可以设置默认值:
  		default:0
  	},
  	minPrice:{
  		type:Number,
  		default:0
  	}
  },
  computed:{
  	// 获取总价：
  	totalPrice(){
  		let total=0;
  		this.selectFood.forEach(function(food){
  			total+=food.price * food.count
  		});
  		return total
  	},
  	// 获取总数：
  	totalCount(){
  		let count=0;
  		this.selectFood.forEach(function(food){
  			count+=food.count;
  		});
  		return count;
  	},
  	payDesc(){
  		if(this.totalPrice===0){
  			return `￥${this.minPrice}元起送`;
  		}else if(this.totalPrice<this.minPrice){
  			let diff=this.minPrice-this.totalPrice
  			return `还差￥${diff}元起送`;
  		}else{
  			return `去结算`;
  		}
  	},
  	payClass(){
  		if(this.totalPrice<this.minPrice){
  			return 'not-enough'
  		}else{
  			return 'enough';
  		}
  	}
  },
  methods:{
  	drop(el) {
  		console.log(el);
  		for(let i=0;i<this.balls.length;i++){
  			let ball=this.balls[i];
  			if(!ball.show){
  				ball.show=true;
  				ball.el=el;
  				this.dropBalls.push(ball);
  				return;
  			}
  		}
  	},
  	//定义三个钩子函数实现动画
    beforeEnter(el) { //el为当前执行transition动画的DOM对象
    //先找到所有为true的小球（连续点击的情况）
        let count = this.balls.length;
        while (count--) {
            let ball = this.balls[count];
            if (ball.show) { //这个是要运动的小球true
                let rect = ball.el.getBoundingClientRect();//获得元素相当于视口的位置
                let x = rect.left - 32;
                let y = -(window.innerHeight - rect.top - 22);
                     console.log(y)
                el.style.display = ''; //v-show默认display：none，设置为空，让它显示
                //外层元素是纵向的动画，内层元素是横向的动画
                el.style.webkitTransform = `translate3d(0,${y}px,0)`;
                el.style.transform = `translate3d(0,${y}px,0)`;
                let inner = el.getElementsByClassName('inner-hook')[0];

                inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`;
                inner.style.transform = `translate3d(${x}px, 0, 0)`;
            }
        }
    },           
    enter(el) {
        /* 触发浏览器重绘，重绘之后才可以设置transform*/
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight;
        this.$nextTick(() => { //样式重置
            el.style.webKitTransform = 'translate3d(0,0,0)';//没有变量时只能用单引，不能用反引
            el.style.transform = 'translate3d(0,0,0)';
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = 'translate3d(0,0,0)';
            inner.style.transform = 'translate3d(0,0,0)';
        });
    },
    afterEnter(el) { //动画完成
        let ball = this.dropBalls.shift();//删除并返回第一个ball
        if (ball) {
            ball.show = false; //重置ball.show的状态
            el.style.display = 'none';
        }
    },	
  },
  name: 'shopcart',
  data () {
    return {
    	balls:[{
    		show:false
    	},{
    		show:false
    	},{
    		show:false
    	},{
    		show:false
    	},{
    		show:false
    	}],
    	dropBalls:[]
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../common/less/index.less";
.shopcart{
	position: fixed;
	z-index: 50;
	bottom:0;
	left:0;
	width:100%;
	height:48px;
	.content{
		display: flex;
		background: #141d27;
		height:100%;
		.content-left{
			flex:1;
			.logo-wrapper{
				display:inline-block;
				position: relative;
				top:-10px;
				margin:0 12px;
				padding:6px;
				width:56px;
				height:56px;
				box-sizing: border-box;
				vertical-align:top;
				border-radius: 50%;
				background: #141d27;
				.logo{
					width:100%;
					height:100%;
					border-radius: 50%;
					background:rgb(43,52,60);
					text-align: center;
					.icon-shopping_cart{
						font-size: 24px;
						line-height:44px;
						color: #80858a;
					}
					&.on{
						background: rgb(0,160,220);
						.icon-shopping_cart{
							color:#fff;
						}
					}
				}
			}
			.num{
				position: absolute;
				top:0;
				right:0;
				width:24px;
				height:16px;
				line-height:16px;
				text-align: center;
				border-radius:16px;
				font-size: 9px;
				font-weight:700;
				color:#fff;
				background: rgba(240,20,20);
				box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
			}
			.price{
				display:inline-block;
				vertical-align:top;
				line-height:24px;
				margin-top:12px;
				box-sizing:border-box;
				padding-right: 12px;
				border-right: 1px solid rgba(255,255,255,0.1);
				font-size: 16px;
				font-weight: 700;
				color:rgba(255,255,255,.4);
				&.on{
					color:rgba(255,255,255);
				}
			}
			.desc{
				display:inline-block;
				vertical-align:top;
				line-height:24px;
				margin-left:12px;
				margin-top:12px;
				color:rgba(255,255,255,.4);
				font-size: 10px;
			}
		}
		.content-right{
			flex:0 0 105px;
			width:105px;
			.pay{
				height:48px;
				line-height:48px;
				text-align: center;
				font-size: 12px;
				color:rgba(255,255,255,.4);
				font-weight:700;
				background: #2b333b;
				&.not-enough{
					background: #2b333b;
				}
				&.enough{
					background: #00b43c;
					color:#fff;
				}
			}
		}
	}
	.ball-container{
		.ball{
			position: fixed;
			left:32px;
			bottom:22px;
			z-index:666;
			&.drop-enter-active{
				transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
			}
			
			.inner{
				width:16px;
				height:16px;
				border-radius:50%;
				background: rgb(0,160,220);
				transition:all 0.4s linear;
			}

		}
	}
}
</style>